<script setup>
import { ref, onMounted } from 'vue'
import { sessionApi, newNoteApi, exitApi, menuApi } from '@/common/api'
import { commonStore } from '@/common/store'
import router from '@/common/router'
import { CScrollbar } from 'c-scrollbar'
import Note from '@/components/notify'
import Msg from '@/components/message'
import MenuTree from '@/components/menu/MenuTree.vue'

const store = commonStore()

// 界面挂载前处理
onMounted(() => {
  // 获取用户会话信息
  userInfo()
})

// userInfo 获取用户会话信息
// 将先用到的字段列出来
const adminInfo = ref({nickName: ''})
const userInfo = async () => {
  const res = await sessionApi()
  if(res.code === 200) {
    adminInfo.value = res.data
    hasNewNote()
    listMenu()
  } else {
    window.localStorage.removeItem('token')
    Msg({ kind: 'error', txt: res.msg })
    router.replace({path: '/'})
  }
}

// 获取用户是否存在未读消息
const readed = ref(false)
const hasNewNote = async () => {
  const res = await newNoteApi()
  if(res.code === 200) {
    readed.value = res.data
    store.initNoticeBadge(res.data)
  }
}

// 获取一级模块菜单
const headers = ref('')
const fstMods = ref([])
const listMenu = async () => {
  const res = await menuApi()
  if(res.code === 200) {
    fstMods.value = res.data
    fstMods.value.unshift({
      modId: '111111111111111111112',
      modName: '主页',
      modCode: '10000000',
      url: '/home',
      actived: true,
      modPos: '主页',
      children: null
    })
    headers.value = '主页'
  }
}

// toggleMenu 切换菜单样式
const childMods = ref([])
const childShow = ref(false)
const toggleMenu = (item) => {
  headers.value = item.modPos
  fstMods.value.forEach(menuItem => {
    menuItem.actived = false
    if(menuItem.modId === item.modId) {
      childMods.value = menuItem.children
      if(childMods.value && childMods.value.children) {
        menuItem.checked = true
      }
    }
  })
  childShow.value = item.children && item.children.length > 0;
  item.actived = true
  if('111111111111111111112' === item.modId) {
    childMods.value = []
    headers.value = '主页'
    router.push('/home')
  }
}

// toHome 跳转至主页
const toHome = () => {
  fstMods.value.forEach(menuItem => {
    menuItem.actived = '111111111111111111112' === menuItem.modId;
  })
  childShow.value = false
  childMods.value = []
  headers.value = '主页'
  router.replace({path: '/home'})
}

// 打开页面
const toPage = (item) => {
  headers.value = item.modPos
  router.push(item.url)
}

// 收起\展示菜单
const opened = ref(true)
const changeMenu = () => {
  opened.value = !opened.value
}

let menuObj = {
  modId: '',
  modName: '',
  modCode: '',
  url: ''
}
const toNotice = () => {
  menuObj = {
    modId: 'DbnWreei95jK99KvmDKGl',
    modName: '消息通知',
    modCode: '10010009',
    modPos: '系统 / 系统管理 / 消息通知',
    url: '/system/notice'
  }
  toPage(menuObj)
}

const toPersonal = () => {
  menuObj = {
    modId: 'DbnWreei95jK99KvmDKGk',
    modName: '修改个人资料',
    modCode: '10010008',
    modPos: '系统 / 系统管理 / 个人资料',
    url: '/system/personal'
  }
  toPage(menuObj)
}

// 用户登出
const exit = async () => {
  const res = await exitApi()
  if(res.code === 200) {
    Note({ kind: 'success', title: '成功', txt: '恭喜您，安全退出成功！' })
    router.replace('/')
  } else {
    Msg({ kind: 'error', txt: res.msg })
  }
}
</script>

<template>
  <div class="m-a">
    <div class="m-b">
      <div class="m-c"><img alt="logo" src="@/assets/img/3.png" width="60" height="30"/></div>
      <div class="m-d" @click="changeMenu()" title="折叠/展开菜单"><i :class="['iconfont', 'fs20', 'fs18', opened ? 'decrease_indent' : 'increase_indent']"></i></div>
      <div class="m-e"><i class="iconfont map_pin_ellipse fs20"></i> 当前位置：{{headers}}</div>
      <div class="m-f" @click="toNotice()" title="点击打开消息中心"><i class="iconfont bell_circle fs20"></i><div v-if="readed" class="badge m-g"></div></div>
      <div class="m-h" @click="toPersonal()" title="点击打开修改个人资料"><i class="iconfont person_circle fs20"></i> {{adminInfo.nickName}}[{{adminInfo.roleName}}]</div>
      <div class="m-i" @click="exit()" title="点击退出登录"><i class="iconfont power fs18"></i> 退出登录</div>
    </div>
    <div class="m-j">
      <div :class="[opened ? 'm-k' : 'hide']">
        <div class="m-l">
          <c-scrollbar>
            <div :class="[curMod.actived ? 'm-m1' : 'm-m2']" v-for="curMod in fstMods" :key="curMod.modId" @click="toggleMenu(curMod)">{{curMod.modName}}</div>
          </c-scrollbar>
        </div>
      </div>
      <div class="m-n">
        <div class="m-o">
          <div :class="[opened && childShow ? 'm-p' : 'hide']">
            <c-scrollbar>
              <menu-tree :treeList="childMods" @toPage="toPage"></menu-tree>
            </c-scrollbar>
          </div>
          <div :class="[opened && childShow ? 'm-q1' : 'm-q2']">
            <c-scrollbar>
              <router-view />
            </c-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.m-a {width: 100%; height: 100%; overflow: hidden; background-color: #EEE;}
.m-b {width: 100%; height: 40px; line-height: 40px; background-color: #FFF; display: flex; display: -webkit-flex;}
.m-c {width: 60px; height: 30px; padding: 5px 10px; background-color: #20222A;}
.m-d {width: 40px; cursor: pointer; text-align: center;}
.m-d:hover {color: #409EFF;}
.m-e {flex-grow: 1;}
.m-f {width: 60px; cursor: pointer; text-align: center;}
.m-f:hover {color: #409EFF;}
.m-g {margin: -32px 0 0 35px;}
.m-h {cursor: pointer;}
.m-h:hover {color: #409EFF;}
.m-i {width: 100px; text-align: right; cursor: pointer; padding-right: 10px;}
.m-i:hover {color: #409EFF}
.m-j {width: 100%; height: calc(100% - 42px); padding-top: 2px; display: flex; display: -webkit-flex;}
.m-k {width: 80px; background-color: #20222A;}
.m-l {width: 80px; height: 100%;}
.m-m1 {text-align: center; color: #FFFFFF; line-height: 55px; font-size: 18px; cursor: pointer; background-color: #409EFF;}
.m-m2 {text-align: center; color: #BDBDC0; line-height: 55px; font-size: 18px; cursor: pointer;}
.m-m2:hover {color: #FFF;}
.m-n {height: 100%; flex-grow: 1;}
.m-o {width: 100%; height: 100%; overflow: hidden; display: inline-flex; display: -webkit-inline-flex;}
.m-p {width: 140px; height: 100%; background-color: #FFF;}
.m-q1 {height: calc(100% - 20px); overflow: hidden; background-color: #FFF; margin: 10px; width: calc(100% - 140px);}
.m-q2 {height: calc(100% - 20px); overflow: hidden; background-color: #FFF; margin: 10px; width: 100%;}
/*

.m-h:hover {color: #409EFF}
 */
</style>
